<template>
	<view class="g-loading">
		<view class="g-loading--dot"></view>
		<view class="g-loading--dot"></view>
		<view class="g-loading--dot"></view>
		<view class="g-loading--dot"></view>
		<view class="g-loading--dot"></view>
		<view class="g-loading--dot"></view>
		<view class="g-loading--dot"></view>
		<view class="g-loading--dot"></view>
		<view class="g-loading--dot"></view>
		<view class="g-loading--dot"></view>
		<view class="g-loading--dot"></view>
		<view class="g-loading--dot"></view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	@keyframes x-loading-circle {

		0%,
		39%,
		100% {
			opacity: 0;
			transform: scale(0.6);
		}

		40% {
			opacity: 1;
			transform: scale(1);
		}
	}

	$prefix: g-loading;

	.#{$prefix} {
		width: 60rpx;
		height: 60rpx;
		position: relative;
		margin: 0 auto;

		&--dot {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;

			&:before {
				content: '';
				display: block;
				width: 12rpx;
				height: 12rpx;
				background-color: #999;
				border-radius: 50%;
				animation: x-loading-circle 1.2s infinite ease-in-out both;
			}

			@for $count from 1 through 11 {
				&:nth-child(#{$count}) {
					transform: rotate(calc(#{$count}*30deg));
				}
			}
		}
	}

	.#{$prefix}--dot:nth-child(1):before {
		animation-delay: -1.1s;
	}

	.#{$prefix}--dot:nth-child(2):before {
		animation-delay: -1s;
	}

	.#{$prefix}--dot:nth-child(3):before {
		animation-delay: -0.9s;
	}

	.#{$prefix}--dot:nth-child(4):before {
		animation-delay: -0.8s;
	}

	.#{$prefix}--dot:nth-child(5):before {
		animation-delay: -0.7s;
	}

	.#{$prefix}--dot:nth-child(6):before {
		animation-delay: -0.6s;
	}

	.#{$prefix}--dot:nth-child(7):before {
		animation-delay: -0.5s;
	}

	.#{$prefix}--dot:nth-child(8):before {
		animation-delay: -0.4s;
	}

	.#{$prefix}--dot:nth-child(9):before {
		animation-delay: -0.3s;
	}

	.#{$prefix}--dot:nth-child(10):before {
		animation-delay: -0.2s;
	}

	.#{$prefix}--dot:nth-child(11):before {
		animation-delay: -0.1s;
	}
</style>